<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form mb-4">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="柜子名称" name="cabinetName">
						<a-input v-model:value.trim="searchFormState.cabinetName" placeholder="请输入柜子名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="柜门名称" name="cabinetDoorName">
						<a-input v-model:value.trim="searchFormState.cabinetDoorName" placeholder="请输入柜门名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="管理员" name="adminName">
						<a-input v-model:value.trim="searchFormState.adminName" placeholder="请输入管理员名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="table.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="resetForm()">重置</a-button>
				</a-col>
				<a-col :span="6">
					<a-form-item label="柜子ID" name="cabinetId" hidden>
						<a-input v-model:value.trim="searchFormState.cabinetId" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'reagentStorageType'">
					{{ $TOOL.dictTypeData('REAGENT_STORAGE_TYPE', record.reagentStorageType) }}
				</template>
				<template v-if="column.dataIndex === 'state'">
					<span v-if="record.state === 1">启用</span>
					<span v-if="record.state === 0">停用</span>
					<span></span>
				</template>
				<template v-if="column.dataIndex === 'doorPermission'">
					<a @click="doorPermissionRef.onOpen(record)">柜门权限</a>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="formRef.onOpen(record)" v-if="hasPerm('bizCabinetDoorReagentEdit')">编辑</a>
						<a @click="goGoodsList(record)">试剂列表</a>
						<a @click="goPermissionList(record)">人员授权</a>
<!--						<a>盘库</a>-->
						<a @click="jumpEvent(record)">事件</a>
						<a-popconfirm
							:title="`确定要${record.state === 0 ? '启用' : '停用'}吗？`"
							@confirm="switchState(record.id)"
						>
							<a type="link" size="small" v-if="hasPerm('bizCabinetInfoReagentDelete')">
								{{ record.state === 0 ? '启用' : '停用' }}
							</a>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="onSuccess" />
	<DoorPermission ref="doorPermissionRef" />
</template>

<script setup name="cabinetdoor">
	import { watchEffect, watch } from 'vue'
	import { message } from 'ant-design-vue'
	import Form from './form.vue'
	import DoorPermission from './doorPermission.vue'
	import bizCabinetDoorReagentApi from '@/api/biz/bizCabinetDoorReagentApi'
	import { useRoute, useRouter } from 'vue-router'

	let searchFormState = reactive({})
	const doorPermissionRef = ref()
	const searchFormRef = ref()
	const table = ref()
	const formRef = ref()
	const emit = defineEmits({ successful: null })
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	//路由
	const router = useRouter()
	const columns = [
		{
			title: '柜子',
			dataIndex: 'cabinetName'
		},
		{
			title: '柜门',
			dataIndex: 'cabinetDoorName'
		},
		{
			title: '存放试剂类型',
			dataIndex: 'reagentStorageType',
			ellipsis: true
		},
		{
			title: '存放总数',
			dataIndex: 'totalStock',
			width: '75px'
		},
		{
			title: '当前在库',
			dataIndex: 'currentStock',
			width: '75px'
		},
		{
			title: '当前借出',
			dataIndex: 'currentBorrowed',
			width: '75px'
		},
		{
			title: '管理员',
			dataIndex: 'adminUserNames',
			ellipsis: true
		},
		{
			title: '状态',
			dataIndex: 'state',
			width: '50px'
		},
		{
			title: '柜门权限',
			dataIndex: 'doorPermission',
			width: '75px'
		}
	]
	watch(
		() => [searchFormState.cabinetName],
		([curVal, preVal]) => {
			console.log(curVal)
			if (!curVal) {
				searchFormState.cabinetId = null
			}
		}
	)

	// 操作栏通过权限判断是否显示
	if (hasPerm(['bizCabinetDoorReagentEdit'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '350px'
		})
	}
	let selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		alert: {
			show: false,
			clear: () => {
				selectedRowKeys = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const loadData = (parameter) => {
		const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
		return bizCabinetDoorReagentApi.bizCabinetDoorPage(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}
	const switchState = (id) => {
		bizCabinetDoorReagentApi.bizCabinetDoorSwitchState({ id: id }).then(() => {
			message.success('操作成功')
			table.value.refresh(false)
		})
	}

	const _useRouter = new useRouter()

	watch(
		() => router.currentRoute.value,
		(newValue, oldValue) => {
			if (newValue.name === 'cabinetdoor_reagent') {
				let params = newValue.params
				console.log('params=', params)
				// 接收路由参数
				let cabinetId = params.cabinetId
				let cabinetName = params.cabinetName
				if (cabinetId && cabinetId !== searchFormState.cabinetId) {
					searchFormState.cabinetId = cabinetId
					searchFormState.cabinetName = cabinetName
					// 加载数据
					if (table.value) {
						table.value.refresh(true)
					}
				}
			}
		},
		{
			immediate: true
		}
	)

	const resetForm = () => {
		searchFormRef.value.resetFields()
		searchFormState.cabinetId = null
		searchFormState.cabinetName = null
		table.value.refresh(true)
	}

	const goGoodsList = (record) => {
		_useRouter.replace({
			name: 'bizReagent',
			params: {
				cabinetDoorId: record.id
			}
		})
	}

	const goPermissionList = (record) => {
		_useRouter.replace({
			name: 'cabinetpermission_reagent',
			params: {
				cabinetDoorId: record.id,
				cabinetDoorName: record.cabinetDoorName
			}
		})
	}

	//跳转到事件
	const jumpEvent = (record) => {
		router.push({
			name: 'bizReagentEvent',
			params: {
				cabDoorId: record.id,
				cabId: record.cabinetInfoId
			}
		})
	}

	const onSuccess = () => {
		table.value.refresh(true)
		message.success('保存成功')
	}
</script>
